.app{
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.leidabox50{
	width:220px;
	height:220px;
	border:4px solid rgba(0,0,0,0);
	border-top-color: #33B589;
	border-bottom-color: #33B589;
	border-radius:50%;
	position: absolute;
	animation:leidabox-eff-50 10s linear infinite;
	animation-direction:reverse;
}
@keyframes leidabox-eff-50{
  to{
		transform:rotate(360deg);
	}
}
.leida50{
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: #31FFBA;
	border-radius: 50%;
	border: 1px solid #33B589;
}
.leida50:before,.leida50:after{
	content: '';
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 1px dashed rgba(0,0,0,0.14);
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	position: absolute;
	z-index: 3;
}
.leida50:after{
	width: 60px;
	height: 60px;
	position: absolute;
	z-index: 10;
}
.line50{
	width: 100px;
	height: 100px;
	background-color: rgba(127,255,212,0.4);
	border-radius: 0 0 0 100%;
	position: absolute;
	left: 0;
	top: 100px;
	z-index: 11;
	animation: zhuaneff50 5s linear infinite;
	transform-origin: 100px 0;
}
.line50:after{
	content: '';
	width: 8px;
	height: 8px;
	background-color: rgba(255,255,255,0.6);
	position: absolute;
	top: -4px;
	right: -4px;
	border-radius: 50%;
}
@keyframes zhuaneff50{
  to {
    transform: rotate(360deg);
  }
}
.guangdian50{
	position: absolute;
	bottom: 66px;
}
.dian50,.dian50:after,.dian50:before{
	width: 7px;
	height: 7px;
	background-color: #33B589;
	position: absolute;
	left: -20px;
	border-radius: 50%;
	animation: eff50 5s steps(6) infinite;
	z-index: 15;
}
.dian50:after{
	content: '';
	width: 6px;
	height: 6px;
	top: 12px;
	left: 44px;
}
.dian50:before{
	content: '';
	width: 3px;
	height: 3px;
	top: 40px;
	left: 34px;
}
@keyframes eff50{
	0% {
	  opacity: 0;
		transform: translate(0, 0);
	}
	25%{
		opacity: 1;
		transform: translate(-10px, -18px);
	}
	50%{
		opacity: 0;
		transform: translate(-18px, -20px);
	}
	75%{
		opacity: 1;
		transform: translate(-24px, -18px);
	}
	100%{
		opacity: 0;
		transform: translate(-34px, -24px);
	}
}
.guangdian50:after,.guangdian50:before{
	content: '';
	width: 6px;
	height: 6px;
	background-color: #33B589;
	position: absolute;
	top: -100px;
	left: 30px;
	border-radius: 50%;
	z-index: 13;
	animation: eff501 5s steps(6) both infinite;
}
.guangdian50:before{
	width: 7px;
	height: 7px;
	top: -20px;
	left: 40px;
}
@keyframes eff501{
	0% {
	  opacity: 0;
	}
	25%{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	75%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}